<template>
  <div>
    <a :href="cmpUrl" download target="_blank"
       :class="name && checkImg(name.replace(/\s/g, '')) ? 'imgA' : ''" :name="name.replace(/\s/g, '')" :id="srcUrl"><i v-if="currObj.isKm" class="icon iconfont icon-fujian"></i>{{name}}</a>
    <span class="iconfont icon-yulan"
          v-show="name && dataType4.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText('pdf', true)"></span>
    <span class="iconfont icon-yulan"
          v-show="name && dataType3.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText('video')"></span>
    <span class="iconfont icon-yulan"
          v-show="name && dataType2.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText('audio')"></span>
    <span class="iconfont icon-yulan"
          v-show="name && dataType1.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText('text')"></span>
    <span class="iconfont icon-yulan"
          v-show="name && dataType.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"
          @click.stop="showPdfOrMediaOrText('pdf')"></span>
    <!--<a :href="srcUrl" target="_blank" v-if="name && dataType.indexOf((name.split('.')[name.split('.').length - 1]).toLowerCase()) > -1"><span class="iconfont icon-yulan"></span></a>-->
    <span class="iconfont icon-yulan"
          v-if="name && checkImg(name.replace(/\s/g, ''))"
          @click.stop="showBigImage"></span>
    <el-button v-if="currObj.showDelBtn" @click="deleteFile" :disabled="currObj.disabled" class="business-file-btn primary_btn">{{$t('public.delete')}}</el-button>
  </div>
</template>
<script>
  import {checkform} from '@/utils/validate'
  import { commitPdfOrMediaOrText } from '@/utils/publicMethod.js'
  const PREVIEW_URL = 'https://view.officeapps.live.com/op/view.aspx?src='
  export default {
    name: 'globalPopup',
    props: {
      // 当前点击的对象 isKm是知识库模块要展示一个附件图标 showDelBtn是备注 新建工单有删除按钮 disabled是删除按钮是否禁止
      currObj: {type: Object, default: function () { return {} }},
      // 该对象保留当前所有附件中包含的图片
      imgObj: {type: Array, default: function () { return [] }},
      // 当前名称， 由于每个模块的处理不一样 所以单传
      name: {type: String, default: ''},
      // 附件的地址
      srcUrl: {type: String, default: ''},
      // 下载附件的url
      url: {type: String, default: ''}
    },
    computed: {
      cmpUrl() {
        if (!this.srcUrl || (this.srcUrl || '').startsWith(PREVIEW_URL)) {
          return this.srcUrl
        }
        const arr = this.srcUrl.split('https://')
        const res = arr.length > 2 ? `https://${arr[arr.length - 1]}` : this.srcUrl
        return res
      },
      noQueryUrl() {
        return this.cmpUrl.split('?')[0]
      }
    },
    methods: {
      deleteFile () {
        this.currObj.url = this.cmpUrl
        this.$emit('deleteFile', this.currObj)
      },
      checkImg (value) {
        if (checkform(value, 'ImgNew')) {
          return false
        } else {
          return true
        }
      },
      // 预览音频、视频、文本、pdf
      showPdfOrMediaOrText (flag, isOffice) {
        let data = {
          flag: flag,
          url: this.noQueryUrl
        }
        if (isOffice) {
          data.url = PREVIEW_URL + this.noQueryUrl
        }
        commitPdfOrMediaOrText(data)
      },
      showBigImage () {
        this.currObj.url = this.noQueryUrl
        this.$emit('showBigImage', this.currObj, this.imgObj)
      }
    },
    data () {
      return {
        dataType4: ['doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx'],
        dataType3: ['mp4', 'webm'],
        dataType2: ['mp3', 'wav', 'ogg'],
        dataType1: ['txt'],
        dataType: ['pdf']
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .icon-yulan
    color $c-main
    padding-left 5px
  .business-file-btn
    margin-left 10px
</style>
